<template>
  <el-form-item label="礼品包图片" prop="thumbnailUrl" :rules="rules" ref="formItemRef">
    <upload v-model:model-value="modelValue" :limit="1" list-type="picture-card">
      <el-icon>
        <Plus/>
      </el-icon>
    </upload>
  </el-form-item>
</template>

<script lang="ts" setup>
const props = withDefaults(defineProps<{
  modelValue: string
}>(), {
  modelValue: ''
})

const emits = defineEmits(['update:model-value'])
const modelValue = computed({
  set(newValue) {
    emits("update:model-value", newValue)
  },
  get() {
    return props.modelValue
  }
})

const formItemRef = ref()

watch(modelValue, (newValue) => {
  if (newValue) {
    formItemRef.value?.clearValidate()
  }
})

const rules = [{message: '请上传商品图片', required: true, trigger: 'change'}]
</script>

<style scoped lang="scss">

</style>
